<template>
	<view class="control">
		<view class="dateslists">
			<van-row class="dates text-center">
				<van-col v-for="item in datelist" :key="item.value" :span="6">
					<view class="date-item" :class="{ active: dateActives === item.value }" @click="dataslists(item)">
						{{ item.label }}
					</view>
				</van-col>
			</van-row>
		</view>
		<view class="list" v-if="active == 0">
			<view class="item" v-for="(item,index) in Auditlist" :key="index" @click="openDetail(item,index)"
				v-if="Auditlist.length">
				<view class="status pa"
					:style="{ backgroundImage: `url(${icon2})` }">
				</view>
				<view>
					<view class="item-title">{{item.model}}</view>
					<view class="detail1">
						{{item.content}}
					</view>
				</view>
				<view class="detail" style="font-size: 22rpx;">
					{{item.user_name?item.user_name:'-'}}  {{item.phone?item.phone:'-'}}
				</view>
				<view class="flex-space-between">
					<view class="flex">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
						<text class="time">{{item.apply_user_name}}</text>
					</view>
					<view class="time ti">
						{{item.create_at}}
					</view>
				</view>
			</view>
			<u-empty mode="" text="数据为空" v-else
				icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
		</view>

		<view class="list" v-if="active == 1">
			<view class="item" v-for="(item,index) in passlist" :key="index" @click="openDetail1(item,index)"
				v-if="passlist.length">
				<view class="status pa"
					:style="{ backgroundImage: `url(${icon2})` }">
				</view>
				<view>
					<view class="item-title">{{item.model}}</view>
					<view class="detail1">
						{{item.content}}
					</view>
				</view>
				<view class="detail" style="font-size: 22rpx;">
					{{item.user_name?item.user_name:''}}  {{item.phone?item.phone:''}}
				</view>
				<view class="flex-space-between">
					<view class="flex">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
						<text class="time">{{item.apply_user_name}}</text>
					</view>
					<view class="time ti">
						{{item.create_at}}
					</view>
				</view>
			</view>
			<u-empty mode="" text="数据为空" v-else
				icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
		</view>

		<view class="list" v-if="active == 2">
			<view class="item" v-for="(item,index) in passlist" :key="index" @click="openDetail1(item,index)"
				v-if="passlist.length">
				<view class="status pa"
					:style="{ backgroundImage: `url(${icon3})` }">
				</view>
				<view>
					<view class="item-title">{{item.model}}</view>
					<view class="detail1">
						{{item.content}}
					</view>
				</view>
				<view class="detail" style="font-size: 22rpx;">
					{{item.user_name?item.user_name:''}}  {{item.phone?item.phone:''}}
				</view>
				<view class="flex-space-between">
					<view class="flex">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
						<text class="time">{{item.apply_user_name}}</text>
					</view>
					<view class="time ti">
						{{item.create_at}}
					</view>
				</view>
			</view>
			<u-empty mode="" text="数据为空" v-else
				icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				active: 0,
				Auditlist: [],
				passlist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				datelist: [{
						label: '今日',
						value: '5'
					},
					{
						label: '本周',
						value: '6'
					},
					{
						label: '本月',
						value: '7'
					},
					{
						label: '本年',
						value: '8'
					},
				],
				dateActives: '5',
				venue_id: '',
				icon1: 'https://sass-test.doit10019.com/upload/202502/19131832-08961913387416362.png?attname=daishenhe.png',
				icon2: 'https://sass-test.doit10019.com/upload/202502/19131750-34252511161849721.png?attname=shenhetongguo.png',
				icon3: 'https://sass-test.doit10019.com/upload/202502/19131803-34739602569227030.png?attname=shenhejujue.png',
			}
		},
		onLoad(query) {
			this.venue_id = query.venue_id
			// status 1 通过  2 拒绝
			this.active = parseInt(query.state)
			if (this.active == 0) {
				this.waitAudit()
			} else if (this.active == 1) {
				this.status = this.active
				this.pass_and_nopass()
			} else if (this.active == 2) {
				this.status = this.active
				this.pass_and_nopass()
			}
		},
		methods: {
			dataslists(item) {
				this.nac = ''
				this.listQuery.pageNo = 1
				this.list = []
				this.dateActives = item.value
				this.nac = item.value
				console.log(this.dateActives)
				console.log(this.nac)
				if (this.active == 0) {
					this.waitAudit()
				} else if (this.active == 1) {
					this.pass_and_nopass()
				} else if (this.active == 2) {
					this.pass_and_nopass()
				}
			},
			async waitAudit() {
				let that = this;
				let params = {
					venue_id: this.venue_id,
					date_type:this.dateActives 
				};
				let res = await personal.waitAudit(params);
				if (res.code == 1) {
					this.Auditlist = res.data
				}
			},
			async pass_and_nopass() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let params = {
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					status: this.status,
					venue_id: this.venue_id,
					date_type:this.dateActives
				};
				let res = await personal.pass_and_nopass(params);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.pass_and_nopass()
			},
			onClick(index) {
				this.Auditlist = []
				this.passlist = []
				if (index.detail.index == 0) {
					this.waitAudit()
				} else if (index.detail.index == 1) {
					this.status = index.detail.index
					this.pass_and_nopass()
				} else if (index.detail.index == 2) {
					this.status = index.detail.index
					this.pass_and_nopass()
				}
			},
			openDetail(item, index) {
				uni.navigateTo({
					url: `/page_admin/approval-admin/approval-process?id=${item.id}`
				})
			},
			openDetail1(item, index) {
				uni.navigateTo({
					url: `./approval-detail?id=${item.id}` + "&venue_id=" + this.venue_id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		background-color: #f3f3f3;
		height: 100vh;
	}

	.dateslists {
		position: fixed;
		z-index: 9;
		top: 0rpx;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		line-height: 100rpx;

		.dates {
			// padding: 0 30rpx;
			// margin-top: 80rpx;
			color: rgb(180, 180, 180);
			font-size: 28rpx;


			.date-item {
				// padding: 30rpx 0;
				font-weight: 700;
			}

			.active {
				color: #000
			}
		}
	}

	.list {
		// height: calc(100vh - 60px);
		overflow: auto;
		padding: 30rpx 30rpx;
		margin-top: 100rpx;

		.item {
			margin-bottom: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			padding: 29rpx 18rpx 30rpx 30rpx;
			height: 280rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			
			.status {
				top: 30rpx;
				right: 30rpx;
				width: 127rpx;
				height: 100rpx;
				background-position: left top;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.item-title {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 24rpx;
			}

			.detail {
				line-height: 34rpx;
				color: rgb(102, 102, 102);
				font-size: 26rpx;
				font-weight: 500;
				
			}
			.detail1 {
				line-height: 34rpx;
				color: rgb(102, 102, 102);
				font-size: 26rpx;
				font-weight: 500;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				white-space: normal;
				/* 允许文本换行 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				/* 将元素设置为盒模型 */
				-webkit-box-orient: vertical;
				/* 设置盒模型的方向为垂直 */
				-webkit-line-clamp: 2;
				/* 限制文本显示的行数 */
				/* 移除 height: auto; 让 -webkit-line-clamp 控制高度 */
				line-height: 1.5;
				/* 设置合适的行高，确保文本正确换行和显示 */
				/* max-height 可以根据需要调整，但通常不是必需的，因为 -webkit-line-clamp 会控制高度 */
			}

			image {
				width: 18rpx;
				height: 19rpx;
				margin-right: 11rpx;
			}

			.time {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
			}

			.ti {
				font-weight: 700;
			}
		}
	}
</style>